<template>
  <view class="benefit">
    <u-toast ref="uToast"></u-toast>
    <view class="merchant-grid">
      <view class="merchant-grid__item">
        <text class="merchant-grid__title">商户</text>
        <text class="merchant-grid__tip">(今日新增)</text>
        <text class="merchant-gri__value">{{
          merchantData.todayMerchantCount
        }}</text>
      </view>
      <view class="merchant-grid__item">
        <text class="merchant-grid__title">商户</text>
        <text class="merchant-grid__tip">(今日激活)</text>
        <text class="merchant-gri__value">{{
          merchantData.todayActiveMerchantCount
        }}</text>
      </view>
      <view class="merchant-grid__item">
        <text class="merchant-grid__title">商户</text>
        <text class="merchant-grid__tip">(累计)</text>
        <text class="merchant-gri__value">{{
          merchantData.allMerchantCount
        }}</text>
      </view>
      <view class="merchant-grid__item">
        <text class="merchant-grid__title">下级</text>
        <text class="merchant-grid__tip">(累计)</text>
        <text class="merchant-gri__value">{{
          merchantData.allAgentCount
        }}</text>
      </view>
    </view>
    <view class="new u-padding-top-20 u-p-b-20">
      <view class="u-margin-20 new__item">
        <u-cell-group :border="false">
          <u-cell-item
            class="cell"
            title="新增商户(本月)"
            label="单位(个)"
            :value="merchantData.curMonthMerchantCount"
            :arrow="false"
            @click="goLists('0')"
          ></u-cell-item>
          <u-cell-item
            class="cell"
            title="激活商户(本月)"
            label="单位(个)"
            :value="merchantData.curMonthActiveMerchantCount"
            :arrow="false"
            @click="goLists('1')"
            :border-bottom="false"
          ></u-cell-item>
        </u-cell-group>
      </view>
      <view class="u-margin-20 new__item">
        <u-cell-group class="u-m-t-20" :border="false">
          <u-cell-item
            class="cell"
            title="新增商户(上月)"
            label="单位(个)"
            :value="merchantData.lastMonthMerchantCount"
            :arrow="false"
          ></u-cell-item>
          <u-cell-item
            class="cell"
            title="激活商户(上月)"
            label="单位(个)"
            :value="merchantData.lastMonthActiveMerchantCount"
            :arrow="false"
            :border-bottom="false"
          ></u-cell-item>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      merchantData: {},
    };
  },
  methods: {
    getMerchants(data) {
      this.merchantData = data;
      // console.log('this.merchantData----->90', this.merchantData);
    },
    goLists(_type) {
      this.$u.route({
        url: 'pages/benefit/benefit-list/benefitLists',
        params: {
          type: _type,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.benefit {
  .merchant-grid {
    margin-left: 10rpx;
    margin-right: 10rpx;
    text-align: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    height: 200rpx;
    background-image: url('/static/image/benefit/img_trade_query_bg.png');
    display: flex;
    justify-content: space-around;
    color: white;
    align-items: center;
    font-size: 32rpx;
    &__item {
      display: flex;
      flex-direction: column;
      font-size: 32rpx;
    }
    &__title {
      font-size: 32rpx;
    }
    &__tip {
      font-size: 28rpx;
      // margin: 10rpx 0;
    }
  }
}
.new {
  background-color: white;
  &__item {
    border: 1rpx solid #f6f6f6;
    border-radius: 20rpx;
  }
}
</style>
